<template>
	<div class="root">
    <!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-form :inline="true" :model="query" >
				<el-form-item>
					<el-input v-model="query.keyword" placeholder="请输入关键字查询"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="openSaveDialog(-1)">新增</el-button>
				</el-form-item>
        <el-form-item style="margin-left: 30px;">
					<el-button type="danger" @click="handleBatDelete">批量删除</el-button>
				</el-form-item>
			</el-form>
		</el-col>
    <el-col :span="24">
      <el-table
        v-loading="listLoading"
        :data="pageInfo.rows"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          width="55">
        </el-table-column>
        <el-table-column
          prop="name"
          label="类型名"
          width="200">
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
          width="230">
        </el-table-column>
        <el-table-column
          prop="img"
          label="图标"
          width="150">
        </el-table-column>
        <el-table-column prop="name" label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="openSaveDialog(scope.row.id)" >编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" circle size="small" @click="deleteById(scope.row.id)"/>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="24" style="margin-top: 20px;">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.page"
      :page-sizes="[3, 5]"
      :page-size="3"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
    </el-col>
    <el-dialog
      title="提示"
      :visible.sync="saveVisible"
      width="40%">
      <div>
        <el-input placeholder="请输入租户类型" v-model="tenantType.name" clearable size="small">
          <template slot="prepend">租户类型：</template>
        </el-input> <br><br>
        <el-input placeholder="请输入类型描述" :rows="2" type="textarea"
        v-model="tenantType.description" clearable size="small">
        </el-input> <br><br>
      </div>
      <el-button type="primary" style="margin: auto;display: block;" @click="saveTenantType">保存</el-button>
    </el-dialog>

  </div>

</template>

<script>
  import tenantTypeApi from '@/api/sys/tenantType'
	export default {
		data() {
			return {
				//分页相关
				query:{
					page:1,
					rows:3,
					keyword:''
				},
				pageInfo:{
					total:0, //总记录数
					rows:[] //表数据
				},
				listLoading: true,
        multipleSelection:[], //选中的数据
        saveVisible:false,
        tenantType:{}
			}
		},
    created(){
    },
		methods: {
			search(){
        this.getListPage(this.query)
      },
      //全选回调函数
      handleSelectionChange(value){
        this.multipleSelection = value
      },
      //每页总条数发生改变的回调函数
      handleSizeChange(pageTotals){
        this.query.rows = pageTotals
        this.getListPage(this.query)
      },
      //当前页发生改变的回调函数
      handleCurrentChange(curentPage){
        this.query.page = curentPage
        this.getListPage(this.query)
      },
      //分页查询
      getListPage(query){
        tenantTypeApi.listPageByQuery(query)
          .then(response => {
            this.pageInfo.rows = response.data.resultObj.rows
            this.pageInfo.total = response.data.resultObj.total
            setTimeout(() => {
              this.listLoading = false
            },300)
          })
      },
      openSaveDialog(id){
        this.saveVisible = true
        if(id !== -1){
          tenantTypeApi.getTenantTypeById(id)
            .then(response => {
              this.tenantType = response.data.resultObj
            })
        }else{
          this.tenantType = {"name":'',"description":''}
        }
      },
      //保存修改
      saveTenantType(){
        tenantTypeApi.saveTenantType(this.tenantType)
          .then(response => {
            this.$message({
              message: '保存数据成功',
              type: 'success'
            });
            this.saveVisible = false
          })
      },
      //通过id删除租户类型
      deleteById(id){
        this.$confirm('此操作将永久删除该租户类型的数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          tenantTypeApi.deleteTenantTypeById(id)
          .then(response => {
            this.getListPage(this.query)
            this.$message({
              message: '恭喜，删除成功',
              type: 'success'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //批量删除
      handleBatDelete(){
        this.$confirm('此操作将永久删除这些租户类型的数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.multipleSelection.forEach(e => {
            tenantTypeApi.deleteTenantTypeById(e.id)
            .then(response => {
              this.getListPage(this.query)
              this.$message({
                message: '恭喜，批量删除成功',
                type: 'success'
              });
            })
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
		},
		mounted() {
      this.getListPage(this.query)
		}
	}

</script>

<style scoped>
.root{
  margin: 30px 16px;
}
.toolbar{
  background-color: rgb(244, 243, 244);
  padding-top: 10px;
  padding-left: 10px;
  height: 60px;
}
</style>
